<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-04-04 16:01:43 
 * @Last Modified by:   RDSunday 
 * @Last Modified time: 2020-04-04 16:01:43 
 */ -->
<!-- 锤子官网布局 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【锤子商城】坚果手机-坚果R2手机-坚果4手机</title>
    <!-- 小图标 -->
    <link rel="shortcut icon" href="./img/favicon.ico">
    <!--  -->
    <link href="css/public.css" rel="stylesheet">
    <link href="css/header.css" rel="stylesheet">
    <link href="./css/hot.css" rel="stylesheet">
    <link href="./css/trademark.css" rel="stylesheet">
    <link href="./css/forum.css" rel="stylesheet">
    <link href="./css/bottom.css" rel="stylesheet">
</head>
<body>
    <!-- header start -->
    <div class="header">
        <!-- nav start -->
        <div class="nav">
            <h1 class="fl-l"></h1>
            <ul class="nav-list fl-l">
                <li><a href="#">在线商城</a></li>
                <li><a href="#">坚果Pro 2s</a></li>
                <li> <a href="#">坚果 R1</a></li>
                <li><a href="#">坚果TNF工作站</a></li>
                <li><a href="#">Smartisan os</a></li>
                <li><a href="#">欢喜云</a></li>
                <li><a href="#">应用</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">荣誉与奖励</a></li>
                <li><a href="#">资讯</a></li>
            </ul>
            <ul class="nav-icon fl-l">
                <li></li>
                <li class="cart_pos-r">
                    <div class="cart pos-a"></div>
                </li>
            </ul>
        </div>
        <!-- nav-end -->
        <!-- header-search start -->
        <div class="header-search pos-r">            
            <!-- search-nav start -->
            <div class="search-nav">
                <ul class="search-list  fl-l">
                    <li>
                        <a href="#">首页</a>
                        <div class="nav-hover"></div>
                    </li>
                    <li>
                        <a href="#">手机</a>
                        <div class="nav-hover pos-r">
                            <ul class="pos-a">
                                <li>
                                    <img src="img/phone01.webp">
                                    <h5>坚果R1</h5>
                                    <p>2999.00</p>
                                </li>
                                <li>
                                    <img src="img/phone01.webp">
                                    <h5>坚果R1</h5>
                                    <p>2999.00</p>
                                </li>
                                <li>
                                    <img src="img/phone01.webp">
                                    <h5>坚果R1</h5>
                                    <p>2999.00</p>
                                </li>
                                <li>
                                    <img src="img/phone01.webp">
                                    <h5>坚果R1</h5>
                                    <p>2999.00</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">足迹系列</a>
                        <div class="nav-hover"></div>
                    </li>
                    <li>
                        <a href="#">官方配件</a>
                    </li>
                    <li>
                        <a href="#">服务</a>
                        <div class="nav-hover"></div>
                    </li>
                </ul>
                <div class="search pos-r fl-r">
                    <form action="#">
                        <input type="text">
                        <div class="search-words pos-a">T恤</div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- hot start -->
    <div class="hot">
        <div class="hot-header">
            <h5>热门商品</h5>
        </div>
        <ul class="clearfix">
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smarttisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
                <div class="details">149.00</div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smarttisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
                <div class="details">149.00</div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smarttisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
                <div class="details">149.00</div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smarttisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
                <div class="details">149.00</div>
            </li>
        </ul>
    </div>
    <!-- hot end -->
    <!-- trademark01 start -->
    <div class="trademark hot">
        <div class="hot-header">
            <h5>品牌周边</h5>

        </div>
        <ul>
            <li>
                <img src="https://resource.smartisan.com/resource/ef8abb6b7c6ad356a3a14e780e307611.png"alt="">

            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
        </ul>
    </div>
    <!-- trademark01 end -->
    <!-- trademark02 start -->
    <div class="trademark hot">
        <div class="hot-header">
            <h5>品牌周边</h5>

        </div>
        <ul>
            <li>
                <img src="https://resource.smartisan.com/resource/ef8abb6b7c6ad356a3a14e780e307611.png"alt="">

            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
        </ul>
    </div>
    <!-- trademark02 end -->
    <!-- trademark03 start -->
    <div class="trademark hot">
        <div class="hot-header">
            <h5>品牌周边</h5>

        </div>
        <ul>
            <li>
                <img src="https://resource.smartisan.com/resource/ef8abb6b7c6ad356a3a14e780e307611.png"alt="">

            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
            <li>
                <img src="https://resource.smartisan.com/resource/24c6437342c9ea969e13f00b82f7e3e5.png" art="">
                <h5 class="smartisan">Smartisan T恤 红白机</h5>
                <div class="hot-radius">
                    <div class="radius"></div>
                    <div class="radius"></div>
                </div>
            </li>
        </ul>
    </div>
    <!-- trademark03 end -->
    <!-- forum start -->
    <div class="forum hot">
        <div class="hot-header">
            <h5>品牌周边</h5>
        </div>
        <ul class="clearfix">
            <li>
                <img src="http://bbs-static.smartisan.com/data/attachment/forum/201809/13/161051ikdtt4k3otzzjcd3.jpg.thumb.jpg"alt="">
                <h5>[开箱]坚果Pro 2s 内敛骚蓝惊艳...</h5>
                <p>内敛骚蓝，惊艳炫光</p>
                <a href="#">阅读全文 ></a>
            </li>
            <li>
                <img src="http://bbs-static.smartisan.com/data/attachment/forum/201809/13/161051ikdtt4k3otzzjcd3.jpg.thumb.jpg"alt="">
                <h5>[开箱]坚果Pro 2s 内敛骚蓝惊艳...</h5>
                <p>内敛骚蓝，惊艳炫光</p>
                <a href="#">阅读全文 ></a>
            </li>
            <li>
                <img src="http://bbs-static.smartisan.com/data/attachment/forum/201809/13/161051ikdtt4k3otzzjcd3.jpg.thumb.jpg"alt="">
                <h5>[开箱]坚果Pro 2s 内敛骚蓝惊艳...</h5>
                <p>内敛骚蓝，惊艳炫光</p>
                <a href="#">阅读全文 ></a>
            </li>
            <li>
                <img src="http://bbs-static.smartisan.com/data/attachment/forum/201809/13/161051ikdtt4k3otzzjcd3.jpg.thumb.jpg"alt="">
                <h5>[开箱]坚果Pro 2s 内敛骚蓝惊艳...</h5>
                <p>内敛骚蓝，惊艳炫光</p>
                <a href="#">阅读全文 ></a>
            </li>
        </ul>
    </div>  
    <!-- bottom start -->
    <div class="bottom">
        <div class="bottom-main ">
            <!-- main left start -->
            <div class="main-left clearfix">
                <dl>
                    <dt>订单服务</dt>
                    <dd>购买指南</dd>
                    <dd>送货政策</dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>自动服务</dd>
                    <dd>使用帮助</dd>
                    <dd>维修门店</dd>
                </dl>
                <dl>
                    <dt>媒体中心</dt>
                    <dd>新闻动态</dd>
                    <dd>官方视频</dd>
                    <dd>图片资源</dd>

                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>荣誉奖项</dd>
                </dl>
                <!--  -->
            </div>
            <!-- main-left end -->
            <!-- main right start -->
            <div class="main-right">
                <h5>400 - 626 - 5666</h5>
                <p>周一到周日 9:00 - 18:00(尽收市话费)</p>
                <div>在线帮助</div>
            </div>
            <!-- main right end -->
            <!-- copy start -->
            <div class="copy ">
                <h4>Copyright © 2012 smartisan.com 版权所有</h4>
                <ul class="clearfix">
                    <li>法律声明</li>
                    <li>隐私条款</li>
                </ul>
                <h6>京 ICP 备 18020659 号 - 2</h6>
            </div>
            <!-- copy end -->

        </div>
    </div>
<!-- bottom end -->
</body>
</html>